<%@page import="java.net.URLEncoder"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="java.sql.ResultSet"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:useBean id="database" scope="request" class="accessibleworldsdatabase.AccessibleWorldsDatabaseJavaBeans"/>
<jsp:useBean id="des" scope="request" class="accessibleworldsdes.AccessibleWorldsDESJavaBeans"/>
<%
database.connect(des.decryptString(des.getServiceSecretKey(), database.getEncryptedPassword()));
%>
<!DOCTYPE html>
<html> 
	<head>
  		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  		<title>Accessible Worlds</title> 
		<script src="http://maps.google.com/maps/api/js?sensor=false" 
        	type="text/javascript"></script>
	</head>
	 
	<body style="margin-top: 10px;text-align: center;">
		<script type="text/javascript">
			var allReportInformation = [
  	   		    <%
  	    		    String SQL =
   		    		"SELECT"+
   		  		    	" Reports.Report_id"+
   		  		    	",Reports.title"+
   		  		    	",Reports.description"+
   		  		    	",Reports.status"+
   		  		    	",Violations.Description"+
   		  		    	",Reports.rating"+
   		  		    	",Reports.V_id"+
   		  		    	",Reports.latitude"+
   		  		    	",Reports.longitude"+
   		  		    " FROM Reports"+
   		  		    	" INNER JOIN Violations ON"+
   		  		    		" Reports.v_id = Violations.V_id"+
   		  		    	" WHERE"+
   		  		    		" Reports.rating > -5"+
   		  		    		" AND Reports.visible = 1"+
   		  		    	" ORDER BY"+
   		  		    		" Reports.status,Reports.V_id";
  	
  	               	ResultSet resultSet = database.execSQL(SQL);
  	               	while(resultSet.next()) {
  	               		%>
  	               		['<%=resultSet.getString("Reports.Report_id")%>','<%=resultSet.getString("Reports.title")%>','<%=resultSet.getString("Reports.description")%>','<%=resultSet.getString("Reports.status")%>','<%=resultSet.getString("Violations.Description")%>',<%=resultSet.getString("Reports.rating")%>,<%=resultSet.getString("Reports.V_id")%>,<%=resultSet.getDouble("Reports.latitude")/1E6%>,<%=resultSet.getDouble("Reports.longitude")/1E6%>]
  	               		<%
  	               		if(!resultSet.isLast()) {
  	                		%>,<%
  	               		}
  	               	}
  	   		    %>
  	   		];
			var allViolationTypes = [
   	   		    <%
   	   				SQL =
		    		"SELECT * FROM Violations"+
		    			" ORDER BY"+
		    				" V_id";
   	
   	               	resultSet = database.execSQL(SQL);
   	               	while(resultSet.next()) {
   	               		%>
   	               		<%="\'"+resultSet.getString("Description")+"\'"%>
   	               		<%
   	               		if(!resultSet.isLast()) {
   	                		%>,<%
   	               		}
   	               	}
   	   		    %>
   	   		];
			var map;
	   		var markersArray = [];
	   		
	   		var holeImage = new google.maps.MarkerImage('images/hole.png',
	   		      new google.maps.Size(32, 32),
	   		      new google.maps.Point(0,0),
	   		      new google.maps.Point(0, 32));
	   		
	   		var nopedestrianImage = new google.maps.MarkerImage('images/nopedestrian.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		var nowheelchairImage = new google.maps.MarkerImage('images/nowheelchair.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		var noelevatorImage = new google.maps.MarkerImage('images/noelevator.png',
		   		      new google.maps.Size(32, 32),
		   		      new google.maps.Point(0,0),
		   		      new google.maps.Point(0, 32));
	   		
	   		function showReports() {
	   			for (var i= 0; i < allReportInformation.length; i++) {
	   				var marker;
	   				if(allReportInformation[i][6] == 1) {
	   					marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: holeImage,});
	   				}
	   				else if(allReportInformation[i][6] == 2) {
	   					marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: nopedestrianImage,});
	   				}
					else if(allReportInformation[i][6] == 3) {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: nowheelchairImage,});
					}
					else if(allReportInformation[i][6] == 4) {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,
			        		icon: noelevatorImage,});
					}
					else {
						marker = new google.maps.Marker({
			        		position: new google.maps.LatLng(allReportInformation[i][7], allReportInformation[i][8]),
			        		map: map,});
					}
	      			
		
		      		google.maps.event.addListener(marker, 'click', (function(marker, i) {
		      			return function() {
		          			infowindow.setContent('<b>'+allReportInformation[i][1]+'</b></br>'+
		          					allReportInformation[i][2]+'</br>'+
		          					allReportInformation[i][3]+'</br>'+
		          					allReportInformation[i][4]+'</br>'+
		          					'<form method="post" action="/Accessible_Worlds_Tomcat_Root/ReportPage.jsp"><input type="hidden" name="reportID" value="'+allReportInformation[i][0]+'"><input type="submit" value="Show Report"></form>');
		          			infowindow.open(map, marker);
		        		};
		      		})(marker, i));
		      		markersArray.push(marker);
	    		};
	    		
	    		var table = document.getElementById('dataTable');
	    		var tmpRow;
				var tmpCell;
				
				tmpRow = document.createElement('tr');
				
				tmpCell = document.createElement('td');
				tmpCell.innerHTML = '<input id="title" name="title" type="text" onkeyup="filter()">';
				tmpRow.appendChild(tmpCell);
				
				tmpCell = document.createElement('td');
				tmpRow.appendChild(tmpCell);
				tmpCell.innerHTML = '<input id="description" name="description" type="text" onkeyup="filter()">';
				
				tmpCell = document.createElement('td');
				tmpRow.appendChild(tmpCell);
				tmpCell.innerHTML = '<select id="status" name="status"  onchange="filter()">'+
					'<option value="">Select Status</option>'+
					'<option value="minor">minor</option>'+
					'<option value="normal">normal</option>'+
					'<option value="urgent">urgent</option>'+
					'<option value="fixed">fixed</option>'+
					'<option value="friendly">friendly</option>'+
			    '</select>';
				
				tmpCell = document.createElement('td');
				tmpRow.appendChild(tmpCell);
				var violationType = '<select id="violationType" name="violationType"  onchange="filter()">'+
					'<option value="">Select Violation Type</option>';
				for(var i=0; i<allViolationTypes.length; i++) {
					violationType = violationType + '<option value="'+allViolationTypes[i]+'">'+allViolationTypes[i]+'</option>';
				}
				violationType = violationType + '</select>';
				tmpCell.innerHTML = violationType;
				
				tmpCell = document.createElement('td');
				tmpRow.appendChild(tmpCell);
				tmpCell.innerHTML = '<input id="rating" name="rating" type="text" onkeyup="filter()">';
				
				tmpCell = document.createElement('td');
				tmpRow.appendChild(tmpCell);
				tmpCell.innerHTML = '';
		    	
				table.appendChild(tmpRow);
	   		};
   		
	   		function showMarker(map,index) {
				markersArray[index].setMap(map);
			};
		
   			function hideMarker(index) {
				markersArray[index].setMap(null);
			};
			
			function showTable() {
				var table = document.getElementById('dataTable');
				for(var i=0; i<allReportInformation.length; i++) {
					if(markersArray[i].getMap() != null) {
						tmpRow = document.createElement('tr');
						
						tmpCell = document.createElement('td');
						tmpCell.innerHTML = allReportInformation[i][1];
						tmpRow.appendChild(tmpCell);
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][2];
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][3];
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][4];
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = allReportInformation[i][5];
						
						tmpCell = document.createElement('td');
						tmpRow.appendChild(tmpCell);
						tmpCell.innerHTML = '<form method="post" action="/Accessible_Worlds_Tomcat_Root/ReportPage.jsp"><input type="hidden" name="reportID" value="'+allReportInformation[i][0]+'"><input type="submit" value="Show Report"></form>';
						
						table.appendChild(tmpRow);
					};
				};
			};
			function filter() {
				var title = document.getElementById('title').value;
				var description = document.getElementById('description').value;
				var status = document.getElementById('status').options[document.getElementById('status').selectedIndex].value;
				var violationType = document.getElementById('violationType').options[document.getElementById('violationType').selectedIndex].value;
				var rating = document.getElementById('rating').value;
				
				for(var i=0; i<allReportInformation.length; i++) {
					showMarker(map,i);			
				};
				for(var i=0; i<allReportInformation.length; i++) {
					if(allReportInformation[i][1].toLowerCase().indexOf(title.toLowerCase()) == -1) {
						hideMarker(i);
					}
					if(allReportInformation[i][2].toLowerCase().indexOf(description.toLowerCase()) == -1) {
						hideMarker(i);
					}
					if(status != '') {
						if(allReportInformation[i][3] != status) {
							hideMarker(i);
						};
					}
					if(violationType != '') {
						if(allReportInformation[i][4] != violationType) {
							hideMarker(i);
						};
					};
					if(rating != '') {
						if(allReportInformation[i][5] != rating) {
							hideMarker(i);
						};
					};					
				};
				var table = document.getElementById('dataTable');
				var rows = table.getElementsByTagName('tr');
				var rowCount = rows.length;
				
				while(rowCount > 2) {
					rowCount--;
					table.removeChild(rows[rowCount]);
				}
				showTable();
			}
		</script>
			
  		<div align="center"><div id="map" style="width: 1007px; height: 300px"></div></br></div>
  		
  		<table id="dataTable" border="1" align="center">
  			<tr>
  				<td width="200px"><b>Title</b></td>
  				<td width="200px"><b>Description</b></td>
  				<td width="100px"><b>Status</b></td>
  				<td width="200px"><b>Violation Type</b></td>
  				<td width="100px"><b>Rating</b></td>
  				<td width="100px"><b>Show Page</b></td>
  			</tr>
		</table>
		
  		<script type="text/javascript">
   			map = new google.maps.Map(document.getElementById('map'), {
         			zoom: 14,
         			center: new google.maps.LatLng(41.086147, 29.048055),
         			mapTypeId: google.maps.MapTypeId.ROADMAP,
       		});
   			
   			var infowindow = new google.maps.InfoWindow();
			showReports();
			showTable();
  		</script>
	</body>
</html>
<%
	database.closeConnection();
%>